<template>
  <swiper
    :slides-per-view="1"
    :space-between="0"
    
    autoplay
    :pagination="{ clickable: true }"
    @swiper="onSwiper"
    @slideChange="onSlideChange"
    class="h"
  >
    <swiper-slide v-for="n in topImages" :key="n">
      
        <img :src="n" alt="" @load="$emit('imgLoad')">
     
    </swiper-slide>
    
  </swiper>
</template>

<script>
import { Swiper, SwiperSlide } from 'swiper/vue';
import SwiperCore, {Autoplay,Pagination} from 'swiper';
  SwiperCore.use([Autoplay,Pagination]);
  export default {
    components: {
      Swiper,
      SwiperSlide,
    },
    props:['topImages'],
  
    methods: {
      onSwiper() {
      
      },
      onSlideChange() {
        
      },
    },
  };
</script>

<style scoped>
    img{
        width: 100%;
      
        vertical-align: middle;
    }
   .h{
       height: 50vh;
   }
</style>